<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 水印示例</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<input type="file" id="upload" accept="image/*" />
<canvas id="canvas"></canvas>
<br/>

<label for="watermarkText">水印内容:</label>
<input type="text" id="watermarkText" value="水印文本" />

<label for="rotation">水印旋转角度 (度):</label>
<input type="range" id="rotation" value="45" min="0" max="360" />
<span id="rotationValue">45</span>

<label for="opacity">水印深浅:</label>
<input type="range" id="opacity" value="5" step="0.1" min="0" max="10" />
<span id="opacityValue">0.5</span>

<label for="hSpacing">列间距 (px):</label>
<input type="range" id="hSpacing" value="40" min="0" max="100" />
<span id="hSpacingValue">40</span>

<label for="vSpacing">行间距 (px):</label>
<input type="range" id="vSpacing" value="20" min="5" max="100" />
<span id="vSpacingValue">20</span>

<label for="fontSize">水印字体大小 (px):</label>
<input type="range" id="fontSize" value="20" min="5" max="100" />
<span id="fontSizeValue">20</span>

<label for="font">水印字体:</label>
<select id="font">
    <option value="KaiTi">楷体</option>
    <option value="Arial">Arial</option>
    <option value="Times New Roman">Times New Roman</option>
    <option value="Courier New">Courier New</option>
</select>

<button id="saveBtn">保存图片</button>

<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    let originalImage = null; // 存储原始图片

    // 处理上传的图片
    document.getElementById('upload').addEventListener('change', (event) => {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = (e) => {
            const img = new Image();
            img.onload = () => {
                originalImage = img; // 保存原始图片
                // 设置画布大小
                canvas.width = img.width;
                canvas.height = img.height;

                // 绘制原始图片
                ctx.drawImage(img, 0, 0);
                drawWatermark(); // 绘制初始水印
            };
            img.src = e.target.result;
        };

        if (file) {
            reader.readAsDataURL(file);
        }
    });

    // 更新水印旋转角度的显示值
    document.getElementById('rotation').addEventListener('input', (event) => {
        document.getElementById('rotationValue').textContent = event.target.value;
        drawWatermark(); // 实时更新水印
    });

    // 更新透明度和列间距的显示值
    document.getElementById('opacity').addEventListener('input', (event) => {
        const value = (event.target.value / 10).toFixed(1); // 转换为 0.0 - 1.0 的值
        document.getElementById('opacityValue').textContent = value;
        drawWatermark(); // 实时更新水印
    });

    document.getElementById('hSpacing').addEventListener('input', (event) => {
        document.getElementById('hSpacingValue').textContent = event.target.value;
        drawWatermark(); // 实时更新水印
    });

    // 更新行间距的显示值
    document.getElementById('vSpacing').addEventListener('input', (event) => {
        document.getElementById('vSpacingValue').textContent = event.target.value;
        drawWatermark(); // 实时更新水印
    });

    // 更新字体大小的显示值
    document.getElementById('fontSize').addEventListener('input', (event) => {
        document.getElementById('fontSizeValue').textContent = event.target.value;
        drawWatermark(); // 实时更新水印
    });

    // 更新水印内容的显示
    document.getElementById('watermarkText').addEventListener('input', drawWatermark);

    // 添加水印
    document.getElementById('font').addEventListener('change', drawWatermark);

    // 实时绘制水印
    function drawWatermark() {
        if (!originalImage) return; // 如果没有原始图片，返回

        // 清空画布，重新绘制原始图像
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(originalImage, 0, 0);

        const opacity = parseFloat(document.getElementById('opacity').value) / 10; // 转换为 0.0 - 1.0 的值
        const horizontalSpacing = parseFloat(document.getElementById('hSpacing').value);
        const verticalSpacing = parseFloat(document.getElementById('vSpacing').value);
        const fontSize = parseFloat(document.getElementById('fontSize').value);
        const font = document.getElementById('font').value;
        const rotation = parseFloat(document.getElementById('rotation').value); // 获取旋转角度
        const watermarkText = document.getElementById('watermarkText').value; // 获取水印文本

        // 添加水印
        addWatermark(watermarkText, rotation, fontSize, horizontalSpacing, verticalSpacing, opacity, font);
    }

    // 添加水印
    function addWatermark(text, angle, fontSize, horizontalSpacing, verticalSpacing, opacity, font) {
        ctx.save(); // 保存当前状态
        ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`; // 设置水印颜色
        ctx.font = `${fontSize}px ${font}`; // 设置动态字体和大小
        ctx.textAlign = 'center'; // 文本居中对齐

        // 绘制水印文本
        for (let y = 0; y < canvas.height; y += verticalSpacing) {
            for (let x = 0; x < canvas.width; x += horizontalSpacing) {
                ctx.save(); // 保存当前状态
                ctx.translate(x, y); // 移动到指定位置
                ctx.rotate(angle * Math.PI / 180); // 旋转文本
                ctx.fillText(text, 0, 0); // 在新的位置绘制文本
                ctx.restore(); // 恢复状态
            }
        }

        ctx.restore(); // 恢复状态
    }

    // 保存图片
    document.getElementById('saveBtn').addEventListener('click', () => {
        const link = document.createElement('a');
        link.href = canvas.toDataURL('image/png'); // 获取图像数据URL
        link.download = 'watermarked-image.png'; // 设置下载的文件名
        link.click(); // 触发下载
    });
</script>
<style>
</style>
</body>
</html>
